/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import '~styles/colors.scss';

$disabled-font-color: $grey-04;
$highlight-color: $yellow-01;
$highlight-row-bg-color: $yellow-02-lighter;
$operations-header-color: $grey-02;
$input-field-color: $blue-03;

.modal .field-level-lineage-modal.modal-dialog {
  max-width: 85vw;
  max-height: 80vh;

  .modal-header,
  .modal-body {
    padding-left: 30px;
    padding-right: 30px;
  }

  .modal-body {
    padding-top: 0;
  }

  .error-container {
    padding: 10px 0;
  }

  .operations-container {
    .navigation {
      user-select: none;
      height: 27px;

      .nav-icon {
        cursor: pointer;
        font-size: 20px;

        &.disabled {
          color: $disabled-font-color;
          cursor: not-allowed;
        }
      }

      .separator {
        margin-left: 5px;
        margin-right: 5px;
      }
    }

    .summary-text,
    .last-executed {
      color: $operations-header-color;
    }

    .summary-text {
      margin-top: 30px;
    }

    .last-executed {
      line-height: 27px;
      vertical-align: bottom;
      margin-bottom: 0;
    }

    .grid-wrapper {
      max-height: 60vh;
      overflow: auto;
      margin-top: 30px;
    }

    .grid.grid-container {
      max-height: 55vh;

      .grid-header,
      .grid-body {
        .grid-row {
          grid-template-columns: 1fr 2fr 2fr 2fr 40% 2fr 2fr;
        }
      }

      .grid-body .grid-row {
        > div:first-child {
          padding-left: 15px;
        }
      }

      .active { background-color: $highlight-row-bg-color; }

      .input-field {
        cursor: pointer;
        color: $input-field-color;

        &:hover {
          text-decoration: underline;
        }

        &.selected {
          color: $highlight-color;
          font-style: italic;
        }
      }
    }
  }
}
